\<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>咪咕视频“vip” 22001010528 王雪伊</title>
    <link rel="stylesheet" href="wang_css/vip.css">
      <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./wang_css/swiper-bundle.min.css" />
    <script src="./wang_fonts/iconfont.js"></script>
</head>
<body>
    <body>
        <header class="wang_header">
            <nav>
                <div class="navbar">
                    <a href="#">精选</a>
                    <a href="#">电视剧</a>
                    <a href="#">电影</a>
                    <a href="#">好莱坞</a>
                    <a href="#">TVB</a>
                    <a href="#">综艺</a>
                </div>
                </nav>
        </header>
        <nav class="wang_nav">
            <ul>
                <li>
                    <a href="./index.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-migushipin-copy"></use>
                        </svg>
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="./tiyu.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-tiyu"></use>
                        </svg>
                        <p>体育</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-VIP1"></use>
                        </svg>
                        <p>VIP</p>
                    </a>
                </li>
                <li>
                    <a href="./duanshipin.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yishu_duanshipin"></use>
                        </svg>
                        <p>短视频</p>
                    </a>
                </li>
                <li>
                    <a href="./wode.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-wode1"></use>
                        </svg>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </nav>
        <main class="wangxue_main">
    <div class="carousel-controls">
        <button class="carousel-control" id="prev">&lt;</button>
        <button class="carousel-control" id="next">&gt;</button>
    </div>
</div>
<div>
 <!-- Swiper -->
 <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">会员福利社
        <p>超值红包免费领</p>
      </div>
      <div class="swiper-slide">校园推荐官
        <p>丰厚佣金等你领</p>
      </div>
      <div class="swiper-slide">NBA学生卡
        <p>首月6元起</p>
      </div>
      <div class="swiper-slide">20G流量包
        <p>1元1G放心刷</p>
      </div>
      <div class="swiper-slide">送好友VIP
        <p>定制卡面送心意</p>
      </div>
      <div class="swiper-slide">咪爱优腾认领
        <p>25看全网</p>
      </div>
    </div>
  </div>
  <div class="title2">
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-VIP"></use>
    </svg>
    <p>限时特惠 加入VIP抢限量好礼</p>
</div>
    <ul class="wxy_list">
        <li>
            <img src="./wang_img/vip1.png">
            <div class="txt1">
                会员首月9元，观影抽异性专属周边
            </div>
        </li>
        <li>
            <img src="./wang_img/vip2.png">
            <div class="txt1">
                一周一场就能回本 特惠畅看全站足球
            </div>
        </li>
    </ul>
  <div class="title2">
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-VIP"></use>
    </svg>
    <p>会员优选 全站热播连连看</p>
</div>
</body>
<!-- json解析 -->
<ul class="wang_list"></ul>
    <script>
        const url=`http://rap2api.taobao.org/app/mock/321624/vip`
        const wang_list=document.querySelector('.wang_list');
        //使用fetch获得url，并加入到tiyu_list中
        fetch(url)
        .then(response => response.json())
     .then(data => {
          data.forEach(item => {
              const li = document.createElement('li');
              li.innerHTML = `
                  <a href="${item.link}">
                      <img src="${item.image}" alt="${item.title}">
                      <div class="title">${item.title}</div>
                      <div class="content">${item.content}</div>
                  </a>
              `;
              wang_list.appendChild(li);
          });
      })
    .catch(error => console.error('Error fetching data:', error)); // 添加错误处理
</script>
<div class="tab">
    <div class="t-title">
        <span class="cur">体育精选</span>
        <span>定制片单</span>
        <span>拯救剧荒</span>
    </div>
    <div class="tc"><img src="wang_img/tiyujingxuan1.png" /></div>
    <div class="tc"><img src="wang_img/dingzhipiandan1.png" /></div>
    <div class="tc"><img src="wang_img/zhengjiujuhuang1.png" /></div>
</div>
<script src="wang_js/tab.js"></script>

  <!-- Swiper JS -->
  <script src="./wang_js/swiper-bundle.min.js"></script>
<!-- javascipt swiper效果 -->
  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 3,
      spaceBetween: 30,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  </script>
</body>

</body>
</script>
</html>

</html>

    </script>
</html>

<!-- [
  {
    "image": "./wang_img/1111.png",
    "link": "https://example.com/news1",
    "title": "雪迷宫",
    "content": "禁毒专家自制炸弹极限救援"
  },
  {
    "image": "./wang_img/2222.png",
    "link": "https://example.com/news2",
    "title": "里斯本丸沉没",
    "content": "天降奇兵！中国渔民勇敢战俘"
  },
    {
    "image": "./wang_img/3333.png",
    "link": "https://example.com/news2",
    "title": "好运家·12.1会员抢先看",
    "content": "张小斐佟大为协议离婚不离居"
  },
    {
    "image": "./wang_img/4444.png",
    "link": "https://example.com/news1",
    "title": "绑架游戏",
    "content": "彭昱畅胡冰卿以欺骗制斗心眼"
  }
] -->
